import React, { useCallback, useState } from "react";
import TodoInput from "./TodoInput";

const TodoList: React.FC = () => {
  const [todos, setTodos] = useState<string[]>([]);

  const addTodo = useCallback((newTodo: string) => {
    setTodos((prevTodos) => [...prevTodos, newTodo]);
  }, []);

  return (
    <div>
      <h2>待办事项</h2>
      <TodoInput onAdd={addTodo} />
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;
